<template>
    <el-card class="human-social-info">
        <div class="title-container">
            <span class="rect"></span>
            <h3>人社信息</h3>
        </div>
        <el-divider></el-divider>
        <div class="contentGrid">
            <div class="gridBlockShort">
                <div class="blockNum" v-if="info.length !== 0">
                    {{ computedIndexNum("年平均参保人数") }}
                </div>
                <div class="blockNum" v-else>--</div>
                <hr class="dottedLine">
                <div class="blockTitle">年平均参保人数</div>
                <div class="blockTitle" v-if="info.length !== 0">
                    <div>({{ computedDataDate("年平均参保人数") }}年)</div>
                </div>
                <div class="blockTitle" v-else>--</div>
            </div>
            <div class="gridBlockShort">
                <div class="blockNum" v-if="info.length !== 0">
                    {{ computedIndexNum("高层次人才数") }}
                </div>
                <div class="blockNum" v-else>--</div>
                <hr class="dottedLine">
                <div class="blockTitle">高层次人才数</div>
                <div class="blockTitle">
                    <div>({{ computedDataDate("高层次人才数") }}年)</div>
                </div>
            </div>
        </div>
    </el-card>
</template>


<script>
const wjApi = window.$api.enterpriseManagement.wjscms
export default {
    data() {
        return {
            info: []
        }
    },
    props: {
        unifiedSocialCreditCode: {
            type: String,
            default: ""
        }
    },
    methods: {
        computedIndexNum(name) {
            return this.info.find(i => i.SubtypeName === name)?.IndexNum
        },
        computedDataDate(name) {
            return this.info.find(i => i.SubtypeName === name)?.DataDate
        },
        async init() {
            this.info = [];
            if (this.unifiedSocialCreditCode) {
                let res = await wjApi.info(
                    `http://221.224.136.227/wjscms/cf/service/DBService/CXQYXQZLXX`,
                    {
                        UID: this.unifiedSocialCreditCode,
                        f: "list"
                    }
                )
                this.info = res.Data
            }
        }
    },
    mounted() {
        // this.init()
    }
}
</script>


<style scoped lang='scss'>
.contentGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 6px;

    .gridBlockShort {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .blockNum {
            font-family: BebasNeue;
            font-size: 26px;
            height: 39px;
            line-height: 39px;
        }

        .dottedLine {
            border-style: dotted;
            width: 90px;
        }

        .blockTitle {
            font-size: 12px;
            height: 18px;
        }
    }
}

.human-social-info {
    width: 39.5%;
}
</style>